<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>


<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>后厨菜品制作管理</title>  
    <style>
    
    body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        .navbar {
            background-color: #d2a679;
            overflow: hidden;
            border-bottom: 2px solid #ccc;
        }

        .navbar a {
            float: left;
            display: block;
            color: #000;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 17px;
        }

        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }

        .navbar a.active {
            background-color: #ff704d;
            color: white;
        }

        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
    
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        h1 {
            margin-bottom: 20px;
            color: #333;
            text-align: center;
        }

        .dish {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 10px;
        }

        .dish h2 {
            margin-top: 0;
        }

        .dish-status {
            margin-top: 10px;
        }

        .finished-dish {
            background-color: #dff0d8;
        }

        .out-of-stock {
            text-decoration: line-through;
            color: #ccc;
        }
        
        table {  
            border-collapse: collapse;  
            width: 100%;  
        }  
        th, td {  
            text-align: left;  
            padding: 8px;  
        }  
        tr:nth-child(even) {background-color: #f2f2f2;}  
        
    </style>
</head>  
<body> 

<div class="navbar">
    <a href="Order Status.jsp">点餐状态</a>
    <a href="BOH.jsp" class="active">后厨状态</a>
    <a href="order.jsp">今日订单</a>
    <a href="Menu Management.jsp">菜品管理</a>
    <a href="Sales Statistics.jsp">营业统计</a>
    <a href="aboutme.jsp">我的</a>
</div>

<h1>后厨菜品制作管理</h1>
<div class="container"> 

<h1>正在制作</h1>

<table border="0">

<tr>
<td style="background-color:#FFFAF0;width:1px;vertical-align:top;">
<img src="https://p0.ssl.qhimgs1.com/sdr/400__/t01e5c28ad7aa52e790.jpg" width="130" height="130">
</td>
<td style="background-color:#FFFAF0;width:770px;vertical-align:top;"><h2>麻婆豆腐</h2>桌号:<br>1、2、3<br>
<label for="condition">状态:</label>
        <select id="select" name="select">
            <option value="制作">制作</option>
            <option value="下架">下架</option>
            <option value="出菜">出菜</option>
        </select>
        </td>
<td style="background-color:#FFFAF0;width:1px;vertical-align:top;">
<img src="https://pic.quanjing.com/k5/ph/QJ9114537745.jpg@!794wsy" width="170" height="130">
</td>
<td style="background-color:#FFFAF0;width:770px;vertical-align:top;"><h2>宫保鸡丁</h2>桌号:<br>1、3<br>
<label for="condition">状态:</label>
        <select id="select" name="select">
            <option value="制作">制作</option>
            <option value="下架">下架</option>
            <option value="出菜">出菜</option>
        </select>
        </td>
</tr>
</table>

<h2>所有菜品名称价格</h2> 

<table width="100%" border="1">
<tr>
    <th>ID</th>  
    <th>菜品名称</th>  
    <th>状态</th> 
    <th width="30%" height="20%">操作</th> 
</tr>
<div class="container">
<form id="dishForm">
    <input type="hidden" id="dish_id" name="dish_id">
    <input type="hidden" id="current_status" name="current_status">
    <input type="text" id="dish_name" name="dish_name" readonly>
    <select id="status" name="status">
        <option value="等待制作">等待制作</option>
        <option value="正在制作">正在制作</option>
        <option value="已出菜">已出菜</option>
    </select>
</form>
<%
String sql = "SELECT dish_id, name, COUNT(dish_id) as amount, status FROM cart GROUP BY dish_id, name, status";
javax.sql.rowset.WebRowSet rs = com.myweb.DBTools.getRS ("SELECT FROM cart");
rs = com.myweb.DBTools.getRS(sql);

//假设 rs 是执行上述 SQL 查询的结果集
while (rs.next()) {
    String dish_id = rs.getString("dish_id");
    String name = rs.getString("name");
    int amount = rs.getInt("amount");
    String status = rs.getString("status");
%>
<tr onclick="fillform(this)" style="cursor:pointer">
    <td><%=dish_id%></td>
    <td><%=name%> (x<%=amount%>)</td>
    <td><%=status%></td>
    <td>
        <!-- 这里可以根据菜品的当前状态提供不同的链接或操作 -->
        <a href="updateStatus.jsp?dish_id=<%= dish_id %>&status=正在制作">正在制作</a>
        <a href="updateStatus.jsp?dish_id=<%= dish_id %>&status=已出菜">已出菜</a>
        <!-- 如果需要，可以添加更多状态更新链接 -->
    </td>
</tr>
<%
}
rs.close();
%>
</table> 

<hr>

<script>
var refreshInterval = 30000; // 30000毫秒

window.onload = function() {
    setInterval(function() {
        location.reload();
    }, refreshInterval);
};

function fillform(row) {
    document.getElementById('dish_id').value = row.cells[0].innerText;
    document.getElementById('dish_name').value = row.cells[1].innerText;
    document.getElementById('current_status').value = row.cells[2].innerText; // 存储当前状态
    document.getElementById('status').value = row.cells[2].innerText; // 设置下拉菜单为当前状态
}
</script>
  
</body> 
</html>